<template>
  <div>
    <myDivider name="工单管理"></myDivider>
    <el-tabs v-model="scene" @tab-click="tabClick">
      <el-tab-pane label="工单登记" name="1"></el-tab-pane>
      <el-tab-pane label="任务派工" name="2"></el-tab-pane>
      <el-tab-pane label="任务回单" name="3"></el-tab-pane>
      <el-tab-pane label="工单归档" name="4"></el-tab-pane>
    </el-tabs>
    <!-- 顶部搜索 -->
    <div class="top">
      <el-select @change="SouSuo" v-model="keytype" placeholder="请选择" style="width: 120px;">
        <el-option label="所有" value=""></el-option>
        <el-option label="电路" value="1"></el-option>
        <el-option label="电器" value="2"></el-option>
        <el-option label="主体结构" value="3"></el-option>
        <el-option label="给排水" value="4"></el-option>
        <el-option label="综合类" value="5"></el-option>
      </el-select>
      <el-input @keyup.enter.native="SouSuo" class="Keyinput" clearable maxlength="20" v-model="keyroom"
        placeholder="输入房间信息查询"></el-input>
      <el-input @keyup.enter.native="SouSuo" class="Keyinput" clearable maxlength="5" v-model="keyname"
        placeholder="输入客户名查询"></el-input>
      <el-input @keyup.enter.native="SouSuo" class="Keyinput" clearable maxlength="11" v-model="keyphone"
        placeholder="输入电话查询"></el-input>
      <el-select @change="SouSuo" clearable v-model="keyResidentialId" placeholder="选择小区">
        <el-option v-for="item, i in keyResidentialData" :key="i" :label="item.name" :value="item.residentialId">
        </el-option>
      </el-select>
      <el-button class="searchForBtn" @click="SouSuo" type="primary">搜索</el-button>
      <el-button class="searchForBtn" @click="reset">重置</el-button>
      <el-button class="addBtn" type="success" @click="addClick" icon="el-icon-plus">新增</el-button>
    </div>

    <!-- 表格列表 -->
    <div class="tableBox">
      <el-table :data="tableData" style="width: 100%" @row-dblclick="rowClick">

        <el-table-column align="center" prop="workOrderNumber" label="单据号" min-width="150" fixed="left">
          <template slot-scope="scope">
            <span>{{ scope.row.workOrderNumber }}</span>
            <el-tooltip v-if="scope.row.checkTime" class="item" effect="dark" :content="Checkcontent(scope.row)"
              placement="top-start">
              <i class="el-icon-warning" style="color: red;cursor: pointer;"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="customerName" label="客户姓名" min-width="180">
        </el-table-column>
        <el-table-column align="center" prop="phone" label="客户电话" min-width="150">
        </el-table-column>
        <el-table-column align="center" prop="residentialName" label="所属小区" width="150">
        </el-table-column>
        <el-table-column align="center" prop="roomName" label="房间信息" width="250">
        </el-table-column>

        <el-table-column align="center" prop="" label="工单状态" width="140">
          <template slot-scope="scope">
            {{ scope.row.status == '1' ? '工单登记' :
              scope.row.status == '2' ? '任务派工' :
                scope.row.status == '3' ? '任务回单' : '工单归档'
            }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="workerName" label="服务人员" width="150" v-if="scene == '2' || scene == '3'">
        </el-table-column>
        <el-table-column align="center" prop="userName" label="经办人" width="140" v-if="scene == '1' || scene == '2'">
        </el-table-column>
        <el-table-column align="center" prop="userName" label="结单人" width="140" v-if="scene == '3' || scene == '4'">
        </el-table-column>
        <el-table-column align="center" prop="userName" label="归档人" width="140" v-if="scene == '4'">
        </el-table-column>
        <el-table-column align="center" prop="orderStatusTime" label="办理时间" width="180" v-if="scene == '1'">
        </el-table-column>
        <el-table-column align="center" prop="orderStatusTime" label="派工时间" width="180" v-if="scene == '2'">
        </el-table-column>
        <el-table-column align="center" prop="orderStatusTime" label="结单时间" width="180" v-if="scene == '3'">
        </el-table-column>
        <el-table-column align="center" prop="orderStatusTime" label="归档时间" width="180" v-if="scene == '4'">
        </el-table-column>
        <el-table-column align="center" label="操作" width="100" fixed="right">

          <template slot-scope="scope">
            <!-- <div style="display: flex;justify-content: space-between;">
              <el-button size="small" icon="el-icon-edit" @click="goDo('update', scope.row)"
                type="primary">修改</el-button>
              <el-button size="small" icon="el-icon-delete-solid" @click="deleteOne(scope.row)"
                type="danger">删除</el-button>
            </div> -->
            <div class="textBtn">
              <el-row>
                <el-col class="el" :span="24">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                    @click="detailClick(scope.row)">详情</span>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <myPagination :pageNum="pageNum" :total="total" @PageChange="PageChange" @pageSizeChange="pageSizeChange">
    </myPagination>
    <!-- 删除事件 -->
    <div>
      <el-dialog title="删除原因" :visible.sync="dialogDelShow" width="650px">
        <el-form ref="Delform" :rules="DelRules" :model="DelData" label-width="80px">
          <el-form-item label="删除原因" prop="deleteReason">
            <el-input class="ok" type="textarea" :rows="2" placeholder="请输入内容" v-model="DelData.deleteReason">
            </el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="DelClose">取 消</el-button>
          <el-button type="primary" @click="DelOk">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 工单归档 -->
    <div>
      <el-dialog @close="popGuiDangClose" title="工单归档" :visible.sync="popGuiDangShow" width="650px">
        <el-form ref="GuiDangform" :rules="GuiDangRules" :model="GuiDangData" label-width="80px">
          <el-form-item label="处理结果" prop="qwe">
            <el-input class="ok" type="textarea" :rows="2" placeholder="请输入内容" v-model="GuiDangData.qwe">
            </el-input>
          </el-form-item>
          <el-form-item label="受理人">
            <el-input class="ok" disabled v-model="User">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="GuiDangOk">确 定</el-button>
        </div>
      </el-dialog>
    </div>




  </div>
</template>

<script>
export default {
  data() {
    return {

      scene: '1', //工单状态:1工单登记2任务派工3任务回单4工单归档
      User: '',
      currentGongDanid: '', //当前要归档的工单id
      GuiDangData: {},
      popGuiDangShow: false,
      GuiDangRules: {
        qwe: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      },
      dialogDelShow: false,
      DelRules: {
        deleteReason: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      },
      DelData: {},
      delId: '',
      keytype: '',
      keyroom: '',
      keyname: '',
      keyphone: '',
      tableData: [
      ],
      keyResidentialId: '',
      keyResidentialData: [],
      urgencyList: ['一般', '紧急', '特急'],
      total: 1,
      pageNum: 1,
      pageSize: 10,
    }
  },

  async activated() {
    this.keyname = ''
    this.keyphone = ''
    this.keytype = ''
    this.keyroom = ''
    this.keyResidentialId = ''
    this.User = sessionStorage.getItem('soa_account')
    this.getData()
    this.getkeyResidentialData()
  },
  methods: {

    async getkeyResidentialData() {
      let res = await this.$api.patrol.myPatrolGetCommunityList('')
      if (res.code == 200) {
        this.keyResidentialData = res.data
        console.log(this.keyResidentialData, 'this.keyResidentialData');
      } else {
        this.$message.error(res.message)
      }
    },
    tabClick(e) {
      this.tableData = []
      setTimeout(() => {
        this.SouSuo()
      }, 100)
    },
    Checkcontent(val) {
      switch (val.urgency) {
        case '1':
          return '超过48小时未处理'
          break
        case '2':
          return '超过24小时未处理'
          break
        case '3':
          return '超过8小时未处理'
          break
      }
      return '456'
    },
    popGuiDangClose() { //归档关闭重置
      this.$set(this.GuiDangData, 'qwe', '')

      this.$nextTick(() => {
        this.$refs['GuiDangform'].clearValidate()
      })
      this.getData()
    },
    async GuiDangOk() { //工单归档确认按钮
      //  this.currentGongDanid
      this.$refs['GuiDangform'].validate(async (valid) => {
        if (valid) {
          let params = {
            "id": this.currentGongDanid,
            "status": '4',
            "result": this.GuiDangData.qwe
          }
          let res = await this.$api.events.updateStatus(params)
          console.log(res);
          if (res.code == 200) {
            this.getData()
            this.$message({
              type: 'success',
              message: '更新成功!'
            });
            this.popGuiDangShow = false
            this.$set(this.GuiDangData, 'qwe', '')
            this.$nextTick(() => {
              this.$refs['GuiDangform'].clearValidate()
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });


    },
    pageSizeChange(e) {
      this.pageSize = e
      this.getData()
    },
    PageChange(e) {
      this.pageNum = e
      this.getData()
    },

    // 删除弹窗 取消
    DelClose() {
      this.dialogDelShow = false
      this.DelData.deleteReason = ''
    },
    // 删除弹窗 确认
    DelOk() {
      this.$refs['Delform'].validate(async (valid) => {
        if (valid) {
          let params = {
            "id": this.delId, //要删除的工单id
            "deleteReason": this.DelData.deleteReason //删除原因
          }
          let res = await this.$api.events.Deletework(params)
          console.log(res);
          if (res.code == 200) {
            this.dialogDelShow = false
            this.DelData.deleteReason = ''
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getData()
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    reset() {
      // this.scene = '1'
      this.keyname = ''
      this.keyphone = ''
      this.keytype = ''
      this.keyroom = ''
      this.keyResidentialId = ''
      this.pageNum = 1
      this.getData()
    },
    SouSuo() {
      // 如果点搜索的时候，当前页数在2的话，就会传2，数据少的时候则没有，所以需要手动改为1
      this.pageNum = 1
      this.getData()
    },
    async getData() {
      let userData = JSON.parse(sessionStorage.getItem('logOnUser'))
      let params = {
        // this.keyResidentialId  小区筛选
        "category": this.keytype, //类别
        "roomName": this.keyroom, //房间名
        "customerName": this.keyname, //客户名
        phone: this.keyphone,
        status: this.scene,
        unitId: userData.unitId,
        "pageSize": this.pageSize, //每页数量 必传
        "pageNum": this.pageNum //页数 必传
      }
      let res = await this.$api.events.getworkList(params)

      if (res.data.list.length < 1 && this.pageNum != 1) { //判断，当搜索关键字有内容时，我直接点击分页，会造成关键词列表中没有某某页的数据，那么我就用第一页重新请求一次
        this.pageNum = 1
        this.getData()
        return
      }
      console.log(res, '我的数据');
      this.total = res.data.total
      this.tableData = []
      res.data.list.forEach(el => {
        this.tableData.push(el)
      })



    },
    // 派单按钮
    PaiDan(row) {
    },
    // 回复按钮
    HuiFu(row) {

    },
    rowClick(row) {
      //去详情
      // this.$router.push(`/workOrder/workDetail?id=${row.id}`)
    },
    async deleteOne(row) {
      // 定位
      // this.$nextTick(() => {
      //   this.$refs['Delform'].clearValidate()
      // })
      if (row.status == '1') {
        this.$confirm('此操作将删除该工单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let params = {
            "id": row.id, //要删除的工单id
          }
          let res = await this.$api.events.Deletework(params)
          console.log(res);
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getData()
          }
        }).catch(() => {
        });


      } else {
        this.$message.error('该工单已处理，不可删除！');
      }

    },
    addClick() {
      this.$router.push('/events/eventsAdd?type=add')
    },
    detailClick(row) {

      // if (row.status == '3') {
      //   this.$message.error('该工单已回单，不可修改！');
      //   return
      // }
      // if (row.status == '4') {
      //   this.$message.error('该工单已归档，不可修改！');
      //   return
      // }

      this.$router.push(`/workOrder/workDetail?id=${row.id}`)
    },

  }
}
</script>

<style lang="less" scoped>
.top {
  width: 100%;
  padding: 20px 0;
  box-sizing: border-box;
  position: relative;

  .Keyinput {
    width: 180px;
  }

  .searchForBtn {}

  .addBtn {
    position: absolute;
    right: 30px;
  }

}

.tableBox {
  margin-top: 50px;

  /deep/ .el-table {
    .has-gutter {
      .is-leaf {}
    }
  }
}

.SeeDetail {
  cursor: pointer;
  font-weight: 600;
  margin-left: 10px;
}
</style>